<!DOCTYPE html>
<html lang=en>
<head>
	<meta charset=utf-8>
	<title>Test AI</title>	
	
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="apple-touch-icon" href="images/icon.png" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<style>
		body {
			width: 100%;
			height: 100%;
			padding: 0px;
			margin: 0px;
			background-color: #ffffff;
		}
		div {
			overflow: hidden;
			transform: translate(0px, 0px);
		}
		.btn-green {
			background: #00ff33;
			background-image: -webkit-linear-gradient(top, #00ff33, #007004);
			background-image: -moz-linear-gradient(top, #00ff33, #007004);
			background-image: -ms-linear-gradient(top, #00ff33, #007004);
			background-image: -o-linear-gradient(top, #00ff33, #007004);
			background-image: linear-gradient(to bottom, #00ff33, #007004);
			-webkit-border-radius: 17;
			-moz-border-radius: 17;
			border-radius: 17px;
			color: #ffffff;
			font-family: 'Comic Sans MS';
			font-weight: bold; 
			font-size: 20px; 
			padding: 5px;
			text-decoration: none;
		}

		.btn-green:hover {
			background: #0b8000;
			background-image: -webkit-linear-gradient(top, #0b8000, #00ff1e);
			background-image: -moz-linear-gradient(top, #0b8000, #00ff1e);
			background-image: -ms-linear-gradient(top, #0b8000, #00ff1e);
			background-image: -o-linear-gradient(top, #0b8000, #00ff1e);
			background-image: linear-gradient(to bottom, #0b8000, #00ff1e);
			text-decoration: none;
		}
		
		.btn-red {
			background: #00ff33;
			background-image: -webkit-linear-gradient(top, #ff0033, #700004);
			background-image: -moz-linear-gradient(top, #ff0033, #700004);
			background-image: -ms-linear-gradient(top, #ff0033, #700004);
			background-image: -o-linear-gradient(top, #ff0033, #700004);
			background-image: linear-gradient(to bottom, #ff0033, #700004);
			-webkit-border-radius: 17;
			-moz-border-radius: 17;
			border-radius: 17px;
			color: #ffffff;
			font-family: 'Comic Sans MS';
			font-weight: bold; 
			font-size: 20px; 
			padding: 5px;
			text-decoration: none;
		}

		.btn-red:hover {
			background: #800b00;
			background-image: -webkit-linear-gradient(top, #800b00, #ff001e);
			background-image: -moz-linear-gradient(top, #800b00, #ff001e);
			background-image: -ms-linear-gradient(top, #800b00, #ff001e);
			background-image: -o-linear-gradient(top, #800b00, #ff001e);
			background-image: linear-gradient(to bottom, #800b00, #ff001e);
			text-decoration: none;
		}
	</style>
</head>

<body>
	<div id="Main" style="width: 660px; height: 760px; position: absolute; left: 0px; top: 0px; transform-origin: 0px 0px; -webkit-transform-origin: 0px 0px; background-color: #003300;">
		<div id="GameScreen" style="width: 660px; height: 660px; position: absolute; left: 0px; top: 0px; background-color: #888888;">
	
		</div>
		<div id="Message" style="position: absolute; width: 400px; height: 50px; left: 25px; top: 695px; color: #00ff00; font-family: 'Comic Sans MS'; font-weight: bold; font-size: 20px;">
			<!--Not connected-->
		</div>
		<input type="button" id="Connect" class="btn-green" value="Connect" style="position: absolute; width: 150px; height: 50px; left: 425px; top: 625px; visibility: hidden;" onclick="Connect();"></input>
	</div>
	
	<script src="Engine.js"> </script>	
	<script src="Main.js"> </script>
</body>
</html>